<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">

            <div class="layui-card">
                <div class="layui-card-body demoTable">
                    <div class="layui-inline">
                        <label>标题</label>
                        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                    <button class="layui-btn" data-type="getCheckData">全删</button>
                </div>
                <div class="layui-card-header">

                    <button class="layui-btn" onclick="xadmin.open('添加用户','/admin/type/create',600,400)"><i
                            class="layui-icon"></i>添加
                    </button>
                </div>
                <div class="layui-card-body ">
                    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/admin/article/articles'
            , cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', title: 'ID', width: 80, fixed: true}
                , {field: 'topic', title: '标题', width: 80}
                , {
                    field: 'pic', title: '封面', width: 80, templet: function (res) {
                        return "<img src='" + res.pic + "'/>"
                    }
                }
                , {field: 'comment_num', title: '评论数', sort: true, width: 135}
                , {field: 'view', title: '浏览量', sort: true, width: 135}
                , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo'}
            ]]
            , id: 'testReload'
            , page: true
            , limit: 2
            , height: 310
        });


        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: demoReload.val()
                    }
                });
            },
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('testReload')
                    , data = checkStatus.data;
                console.log(data)
                var ids = ''
                for (const argument of data) {
                    ids += argument.id + ","
                }
                console.log(ids)
                $.ajax({
                    url: "/admin/article/delAll",
                    data: {ids: ids},
                    success(res) {
                        console.log(res)
                        if (res.code == 200) {
                            table.reload('testReload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        }
                    }
                })
            }
        };


        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/admin/type/delete",
                        data: {id: data.id},
                        success(res) {
                            layer.msg(res.msg)
                            if (res.code == 200) {
                                obj.del();
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                xadmin.open("详情页", '/admin/article/edit?id=' + data.id)
            }
        });

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</html>